<template>
    <div class="registerPage">
      <div class="head">
        <div class="rightNow">立即注册</div>
        <div class="title"></div>
        <div class="suffix">!</div>
      </div>
      <div class="icon"></div>
      <div class="content">
        <input
          v-model="form.email"
          placeholder="请输入邮箱号"
          placeholder-class="account-holder"
          @input=""
          class="input"
        />
        <input
          v-model="form.username"
          placeholder="请输入用户名"
          placeholder-class="account-holder"
          @input=""
          class="input"
        />
        <div class="vertificate-box">
          <input
            v-model="code"
            placeholder="请输入验证码"
            placeholder-class="vertificate-holder"
            @input=""
            class="vertificate"
          />
          <span class="code" @click="getCode(form.email)">发送验证码</span>
        </div>
        <input
          v-model="form.password"
          placeholder="请输入新密码"
          placeholder-class="account-holder"
          @input=""
          class="input"
        />
        <input
          v-model="confirm"
          placeholder="请输入并确认密码"
          placeholder-class="account-holder"
          @input=""
          class="input"
        />
      </div>
      <div class="comment">
        <el-checkbox v-model="agree" size="small" class="checkbox">
          我已阅读用户手册和隐私政策
        </el-checkbox>
        <div class="noCode">接收不到验证码</div>
      </div>
      <el-button color="#5784FF" class="button" @click="registerAt">注册</el-button>
      <div class="login">
        <div class="account">已有账户？</div>
        <div class="turnLogin">立即登录</div>
      </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { reqGetCode, reqRegister } from '@/apis/login'
import { useRouter } from 'vue-router'
import { useLoginStore } from '@/stores/login'
const router = useRouter()
const loginStore = useLoginStore()
let form = ref({
  email: '',
  username: '',
  password: ''
})
let code = ''
let confirm = ''
let agree = ref(false)
async function getCode(email:string){
  await reqGetCode(email)
}
async function registerAt(){
  await reqRegister(form.value)
  if(!loginStore.isRegisterred){
    loginStore.login()
    router.push('/')
  }
  router.push('/login')
}
</script>

<style scoped lang="less">
@import url('@/views/login/register/index.less');
</style>